<template>
	<view class="container">
		<view class="topbox">
			<view class="left" :class="{'active':isActive==3}" @click="NotBeginOrder(3)">
				<text>商品订单</text>
			</view>
			<view class="right" :class="{'active':isActive==2}" @click="OverOrder(2)">
				<text>助教订单</text>
			</view>
			<view class="center" :class="{'active':isActive==0}" @click="BeginOrder(0)">
				<text>球桌订单</text>
			</view>

		</view>
		<view class="example-body">
			<uni-datetime-picker @change=change type="date" :clear-icon="false" v-model="ordertime" />
		</view>
		<view class="noneBox" v-if="dataList==''">
			<view class="noneText" >
				<text>暂时没有更多了噢~</text>
			</view>
		</view>
		
		<view class="GoodsOrders" v-show="isActive==3&&order!=''" v-for="(order,index) in dataList">
			<view class="time">
				<view class="left">
					<text>{{order.createTime}}</text>
				</view>
				<view class="right">
					<text v-if="order.orderStatus==0">订单生成中</text>					
					<text v-if="order.orderStatus==1">已完成</text>					
					<text v-if="order.orderStatus==2">已取消</text>					
					<text v-if="order.orderStatus==3">已退款</text>													
				</view>
			</view>
			<view class="listdata">
				<view class="list">
				<!-- 	<view class="image">
						<image :src="good.imageUrl" mode="scaleToFill"></image>
					</view> -->
					<view class="name">
						<text>{{order.content}}</text>
						<!-- <text>白色</text> -->
					</view>
					<!-- <view class="price">
						<text>￥{{good.salePrice}}</text>
						<text>x{{good.num}}</text>
					</view> -->
				</view>
			</view>
			<view class="totalBox">
				<view class="left">
					<text>共{{(order.storeGoodsList).length}}件商品</text>
				</view>
				<view class="right">
					<text>实付金额:</text>
					<text>￥</text>
					<text>{{order.price}}</text>
				</view>
			</view>
		</view>
		<view class="TeacherOrder" v-show="isActive==2&&order!=''" v-for="(order,index) in dataList">
			<view class="desk">
				<view class="left">
					<text>{{order.name}}</text>
				</view>
				<view class="right">
					<text v-if="order.orderStatus==0">订单生成中</text>
					<text v-if="order.orderStatus==1">已完成</text>					
					<text v-if="order.orderStatus==2">已取消</text>					
					<text v-if="order.orderStatus==3">已退款</text>		
				</view>
			</view>
			<view class="list" v-for="(good,index) in order.storeGoodsList">
				<view class="image">
					<image :src="good.imageUrl" mode="scaleToFill"></image>
				</view>
				<view class="name">
					<text>{{good.name}}</text>
				</view>
				<view class="price">
					<text>￥{{good.salePrice}}</text>
				</view>
			</view>
			<view class="time">
				<view class="left">
					<text>时间 {{good.createTime}}</text>
				</view>
				<!-- <view class="rigt">
					<text>1小时56分钟</text>
				</view> -->
			</view>
			<!-- <view class="deletebox">
				<view class="delete">
					<text>删除订单</text>
				</view>
			</view> -->
		</view>
		<view class="DeskOrder" v-show="isActive==0&&order!=''" v-for="(order,index) in dataList">
			<view class="desk">
				<view class="left">
					<text>{{order.storeName}}</text>					
				</view>
				<view class="right">
					<text v-if="order.orderStatus==0">订单生成中</text>
					<text v-if="order.orderStatus==1">已完成</text>					
					<text v-if="order.orderStatus==2">已取消</text>					
					<text v-if="order.orderStatus==3">已退款</text>	
				</view>
			</view>
			<view class="list" >
				<view class="name">
					<text>{{order.cashierName}}</text>
				</view>
				<view class="price">
					<text>￥{{order.price}}</text>
				</view>
			</view>
			<view class="time">
				<view class="left">
					<text>时间 {{order.createTime}}</text>
				</view>
				<!-- <view class="rigt">
					<text>1小时56分钟</text>
				</view> -->
			</view>
			<!-- <view class="deletebox">
				<view class="delete">
					<text>删除订单</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 3,
				ordertime: '',
				dataList: [],
				orderType: 3,
				year: '',
				month: '',
				day: '',
				pageNum: 1,
				pageSize: 10,
			};
		},
		onShow() {
			const date = new Date();
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1;
			this.day = date.getDate();
			this.month = this.month > 9 ? this.month : '0' + this.month;;
			this.day = this.day > 9 ? this.day : '0' + this.day;
			console.log(this.year, this.month, this.day);
			this.getOrder()
		},
		methods: {
			change(e) {
				console.log(e);
				const arr = e.split('-')
				console.log(arr);
				this.year = arr[0];
				this.month = arr[1];
				this.day = arr[2];
				this.getOrder();				
			},
			async getOrder() { 
				let data = {
					day: this.day,
					month: this.month,
					year: this.year,
					orderType: this.orderType,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					storeId: uni.getStorageSync('storeId'),
				}
				const {
					data: res
				} = await uni.$http.post(`/order/orderQueryByDate`, data);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '订单列表');
				this.dataList = res.data.records;				
			},
			NotBeginOrder(num) {
				this.isActive = num
				this.orderType=num;
				this.getOrder()
			},
			OverOrder(num) {
				this.isActive = num
				this.orderType=num;
				this.getOrder()
			},
			BeginOrder(num) {
				this.isActive = num
				this.orderType=num;
				this.getOrder()
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 1vh;
		overflow-y: auto;
		height: 95vh;
	}
	.noneBox{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10vh;
		.noneText{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 5vw
		}
	}
	.example-body {
		margin-top: 1vh;
	}

	.DeskOrder {
		margin-top: 2vh;
		width: 100%;
		background-color: #fff;

		.deletebox {
			height: 7vh;
			position: relative;

			.delete:active {

				background-color: rgba(87, 209, 239, 0.2);
			}

			.delete {
				width: 20vw;
				height: 4vh;
				font-size: 30rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #424242;
				position: absolute;
				right: 2vw;
				top: 1vh;

			}
		}

		.time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 6vh;
			font-size: 25rpx;
			padding: 2vw;
			border-bottom: 3rpx solid #f5f5f5;
		}

		.desk {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 3rpx solid #f5f5f5;
			margin-top: 1vh;
			height: 3vh;
			font-size: 25rpx;
			color: #9c9c9c;
			padding: 2vw;
			
			.right {
				color: #30c1d7;
			}
		}

		.list {
			display: flex;
			height: 10vh;
			border-bottom: 3rpx solid #f5f5f5;
			position: relative;

			.price {
				display: flex;
				justify-content: center;
				flex-direction: column;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%, -50%);

				text:nth-child(2) {
					font-size: 30rpx;
					color: #9c9c9c;
					position: absolute;
					right: 0;
					top: 100%;
				}
			}

			.name {
				display: flex;
				justify-content: center;
				flex-direction: column;
				// align-items: center;
				margin-left: 3vw;

				text:nth-child(2) {
					font-size: 27rpx;
					color: #9c9c9c;
				}
			}
		}
	}

	.TeacherOrder {
		margin-top: 2vh;
		width: 100%;
		background-color: #fff;

		.deletebox {
			height: 7vh;
			position: relative;

			.delete:active {

				background-color: rgba(87, 209, 239, 0.2);
			}

			.delete {
				width: 20vw;
				height: 4vh;
				font-size: 30rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #424242;
				position: absolute;
				right: 2vw;
				top: 1vh;

			}
		}

		.time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 6vh;
			font-size: 25rpx;
			padding: 2vw;
			border-bottom: 3rpx solid #f5f5f5;
		}

		.desk {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 3rpx solid #f5f5f5;
			margin-top: 1vh;
			height: 3vh;
			font-size: 30rpx;
			color: #9c9c9c;
			padding: 2vw;

			.right {
				color: #30c1d7;
			}
		}

		.list {
			display: flex;
			height: 10vh;
			border-bottom: 3rpx solid #f5f5f5;
			position: relative;
			width: 90%;
			// .image {
			// 	width: 14vw;
			// 	height: 14vw;
			// 	margin-left: 4vw;

			// 	image {
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }

			// .price {
			// 	display: flex;
			// 	justify-content: center;
			// 	flex-direction: column;
			// 	position: absolute;
			// 	right: 0;
			// 	top: 50%;
			// 	transform: translate(-50%, -50%);

			// 	text:nth-child(2) {
			// 		font-size: 30rpx;
			// 		color: #9c9c9c;
			// 		position: absolute;
			// 		right: 0;
			// 		top: 100%;
			// 	}
			// } 

			.name {
				display: flex;
				justify-content: center;
				flex-direction: column;
				// align-items: center;
				margin-left: 3vw;
				width: 90%;
				word-break: break-all;
				text{
					font-size: 27rpx;
					color: #9c9c9c;
				}
			}
		}
	}

	.GoodsOrders {
		margin-top: 2vh;
		width: 100%;
		background-color: #fff;

		.time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 3rpx solid #f5f5f5;
			margin-top: 1vh;
			height: 3vh;
			font-size: 30rpx;
			color: #9c9c9c;
			padding: 2vw;

			.right {
				color: #d74d5c;
			}
		}

		.totalBox {
			height: 8vh;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.right {
				text:nth-child(2) {
					margin-left: 2vw;
				}

				text:nth-child(3) {
					color: #ff0000;
					font-size: 5vw;
				}
			}
		}

		.list {
			display: flex;
			height: 10vh;
			border-bottom: 3rpx solid #f5f5f5;
			position: relative;

			// .image {
			// 	width: 14vw;
			// 	height: 14vw;
			// 	margin-left: 4vw;

			// 	image {
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }

			// .price {
			// 	display: flex;
			// 	justify-content: center;
			// 	flex-direction: column;
			// 	position: absolute;
			// 	right: 0;
			// 	top: 40%;
			// 	transform: translate(-50%, -50%);

			// 	text:nth-child(2) {
			// 		font-size: 30rpx;
			// 		color: #9c9c9c;
			// 		position: absolute;
			// 		right: 0;
			// 		top: 100%;
			// 	}
			// }

			.name {
				display: flex;
				justify-content: center;
				flex-direction: column;
				// align-items: center;
				margin-left: 3vw;
				width: 90%;
				word-break: break-all;
				text{
					font-size: 27rpx;					
				}
			}
		}
	}

	.topbox {
		width: 100%;
		height: 13vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;

		.active {
			color: $uni-color-primary;
			border-bottom: 4rpx solid #0055ff;
		}

		.left,
		.right,
		.center {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			width: 30%;
			height: 10vw;
		}
	}
</style>